<template>
    <div class="all">
      <div class="header"><img src="../mine/images/1.png"></div>
      <div class="hello">
        <div class="p1" @click="dealLogin">{{this.$store.state.user?'你好—小摹':'请先登录！'}}</div>
        <div class="p2">江山起源，灵感寻味</div>
      </div>
      <div class="vip">
        <div class="vip_up">

            <div class="go">GO会员</div>
            <span>成为星球会员享双倍积分</span><br>
            <button>成为星球会员</button>
        </div>
        <div class="vip_down">
          <div @click="$router.push('/integral')"  class="col">
            <img src="../mine/images/2.png" ><br>
            <span>22</span><br>
            <span>积分商城</span>
          </div>
          <div class="col">
            <img src="../mine/images/3.png" ><br>
            <span>0</span><br>
            <span>喜茶券</span>
          </div>
          <div @click="$router.push('/integral')" class="col">
            <img src="../mine/images/4.png" ><br>
            <span>0</span><br>
            <span>积分商城</span>
          </div>
        </div>
      </div>
      <div class="mission">
        <div class="mission_child">
          <span class="s1">任务中心</span><br>
          <span class="s2">MISS CENTRE</span>
        </div>
        <div class="mission_child">
          <img src="../mine/images/5.png" >
        </div>
      </div>
      <div class="gift">
        <div class="gift_up">
          <span class="span1">开通礼包</span>
          <span class="span2">更多</span>
        </div>
        <div class="function">
          <div class="gift_middle">
            <div class="col1"><img src="../mine/images/6.png"/><br>星球赠饮券</div>
            <div class="col1"><img src="../mine/images/7.png"/><br>买一赠一券</div>
            <div class="col1"><img src="../mine/images/8.png"/><br>买二赠一券</div>
          </div>
          <div class="gift_down">
            <div class="col1"><img src="../mine/images/9.png"/><br>喜茶轻食券</div>
            <div class="col1"><img src="../mine/images/10.png"/><br>优先券</div>
            <div class="col1"><img src="../mine/images/11.png"/><br>免运费券</div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="col">
          <span class="s1">会员码</span>
          <span class="s2">门店扫码积分和阿喜有礼卡字符 ></span>
        </div>
        <div class="col">
          <span class="s1">兑换中心</span>
          <span class="s2">兑换星球会员、喜茶券和阿喜有礼卡 ></span>
        </div>
        <div class="col">
          <span class="s1">星球封面</span>
          <span class="s2">> </span>
        </div>
      </div>
    </div>
</template>

<script>
  import {changeUserInfo} from 'network/index'
    export default {
        name: "mine",
      created(){
        changeUserInfo({
          user_id: "1"
        }).then(res=>{
          console.log(res);
        }).catch(err=>{

        })
      },
      methods:{
        dealLogin(){
          if(this.$store.state.user){
            this.$router.push('/editInfo')
          }else{
            this.$router.push('/phone_login')
          }
        }
      }
    }
</script>

<style scoped>
  .all{
    /*text-align: center;*/
    width: 100vw;
    padding-bottom: 60px;
    background-color: #f4f4f5;
    position: relative;
  }
  .header img{
    width: 100%;
    /*height: 292px;*/
  }
  .hello{
    padding-left: 15px;
  }
  .hello .p1{
    font-size:16px;
    font-weight: bold;
    margin: 5px;
    color: #DBA871;
  }
  .hello .p2{
    font-size: 12px;
    margin: 5px;
    color: #DBA871;
  }
  .vip{

    margin:10px 15px 0px;
    background-color: #ffffff;
    height: 200px;
    border-radius:10px;
  }

  .vip_up{
    padding-left: 12px;
    padding-top:15px ;
    padding-bottom: 15px;
    line-height:25px;
  }
  .vip_up .go{
    display: inline-block;
    color: #333333;
    font-weight: bolder;
    font-size: 20px;
    margin-right: 10px;

  }
  .vip_up span{
    display: inline-block;
    width: 150px;
    height: 25px;
    font-size: 3px;
    line-height: 30px;
    padding-left: 10px;
    background-color: #efeff1;
    border-radius:30px;
  }
  .vip_up button{
    padding: 0 6px;
    font-size: 12px;
    background-color: #ffffff;
  }
  .vip_down{
    text-align: center;
    display: flex;



  }
  .vip_down img{
    height: 40px;
    width: 40px;
  }
  .vip_down .col{
    flex-grow: 1;
    flex-shrink: 1;
    border-top: 2px solid #f4f4f5;
    padding-top: 20px;
    line-height: 22px;
    color: #777777;
  }



  .mission{
    display: flex;
    color: #777777;
    margin: 20px 15px 0px;
    background-color: #ffffff;
    height: 150px;
    text-align: center;
    align-items: center;

  }
  .mission img{
    height: 145px;
    width: 145px;
  }
  .mission .s1{
    font-size:20px ;
    font-weight: bold;
  }
  .mission .s2{
    font-size:13px ;
  }
  .mission .mission_child{
    flex-grow: 1;
    flex-shrink: 1
  }


  .gift{

    height: 230px;
    margin-top: 15px;
    padding-left: 20px;
    padding-top: 25px;
    padding-right: 20px;
    font-size: 13px;
    background-color: #ffffff;
  }

  .gift_middle{
    display: flex;
  }
  .gift_down{
    display: flex;
  }
  .gift .span1{
    font-weight: bolder;

  }
  .gift .span2{

    float: right;
  }
  .gift .col1{

    flex-grow: 1;
    flex-shrink: 1;
    padding-top: 10px;
  }
  .gift img{
    width: 40px;
    height: 40px;
  }
  .gift .function{
    line-height: 20px;
    text-align: center;
    margin-top: 15px;
  }

  .footer{
    height: 150px;
    margin-top: 20px;
    padding-left: 20px;

    padding-right: 20px;
    font-size: 13px;
    background-color: #ffffff;
  }
  .footer .col{
    line-height: 50px;

  }
  .footer .s1{
    color: #7F7F7F;
  }
  .footer .s2{
    float: right;
    color:#D7D7D7;
  }
</style>